<template>
  <div style="height: 100%; display: block">
    <el-row style="display: flex; height: 100%; background-color: #f6f8f9" :gutter="30">
      <el-col :span="6" style="background-color: #fff">
        <div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 10px;
            margin: 10px 0;
            background-color: white;
          ">
          部门列表
        </div>
        <div style="
            padding: 0 5px;
            overflow-x: auto;
            overflow-y: auto;
            height: 80%;
            background-color: #fafafa;
          ">
          <el-tree :data="dpms" node-key="id" default-expand-all :expand-on-click-node="false" :props="{
            children: 'SubDepartments',
          }" @node-click="(node) => (curDpm = node)" style="background-color: #fafafa">
            <span class="custom-tree-node" slot-scope="{ data }">
              <span>
                {{ data.DPM_Name }}
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="18" style="flex: 1; margin-left: 10px; background: #fff; padding: 10px">
        <div v-if="curDpm" class="session">
          <div style="margin-bottom: 20px">
            {{ curDpm.DPM_Name }}
          </div>
          <div>
            <span style="width: 60px; text-align: right">关键字</span>
            <el-input placeholder="请输入关键字" v-model="dpmEmpReq.keyword"
              style="width: 200px; margin-left: 10px"></el-input>
            <el-link type="primary" style="margin-left: 30px" @click="getDepartmentEmps()" v-if="curDpm">
              用户搜索
            </el-link>
          </div>
          <el-table :data="dpmEmpRes.Items" style="margin-top: 20px" height="65vh">
            <el-table-column prop="DPM_Name" label="部门" width="200"></el-table-column>
            <el-table-column prop="USR_Name" label="用户名" width="120"></el-table-column>
            <el-table-column prop="USR_Phone" label="联系方式" width="160"></el-table-column>
            <el-table-column label="公司权限限制">
              <template slot-scope="scope">
                <span v-if="scope.row.CompanyLimits.length">已限制查阅{{ scope.row.CompanyLimits.length }}家公司；</span>
                <span v-if="scope.row.EmployeeLimits.length">已限制查阅{{ scope.row.EmployeeLimits.length }}个人员；</span>
              </template>
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" class="demo-table-expand">
                  <el-form-item label="公司限制">
                    <span v-for="item, index in props.row.CompanyLimits" :key="index"
                      style="margin-left: 15px;color:#000;font-size: 15px;">{{
                        item.CMP_Name }}</span>
                  </el-form-item>
                  <el-form-item label="人员限制">
                    <span v-for="item, index in props.row.EmployeeLimits" :key="index"
                      style="margin-left: 15px;color:#000;font-size: 15px;">【{{
                        item.CMP_Name }}】{{ item.USR_Name }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="text" @click="
                  curEmp = scope.row
                getEmployeeCompanyLimits()
                  ">
                  公司限制
                </el-button>
                <el-button type="text" @click="
                  curEmp = scope.row
                empLimitVis = true
                  ">
                  人员限制
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%; height: 40px">
            <el-pagination layout="total,prev,pager,next" style="float: right" background small
              :current-page.sync="dpmEmpReq.pageIndex" :total="dpmEmpRes.Total" :page-size="dpmEmpReq.pageSize"
              :page-sizes="[10, 15, 20]" @size-change="
                (val) => {
                  dpmEmpReq.pageSize = val
                  getDepartmentEmps()
                }
              " @current-change="getDepartmentEmps()"></el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="cmpLimitVis" title="公司限制" width="60vw" :modal-append-to-body="false" top="70px">
      <departmentCompanyChoose @sure="saveEmployeeCompanyLimits" :cmps="empCmps" :dpmId="curDpm.DPM_ID" v-if="curDpm" />
    </el-dialog>

    <el-dialog :visible.sync="empLimitVis" title="人员限制" width="60vw" :modal-append-to-body="false" top="70px">
      <employeeCompanyEmpLimit :empId="curEmp.DE_EmployeeID" :dpmId="curDpm.DPM_ID" v-if="curEmp && curDpm"
        @add="getDepartmentEmps" />
    </el-dialog>
  </div>
</template>
<script>
import {
  getDepartmentTree,
  getDepartmentEmps,
  getEmployeeCompanyLimits,
  saveEmployeeCompanyLimits
} from '@/api/personal/departmentManage'
import departmentCompanyChoose from '@/views/web/orgnization/components/departmentCompanyChoose.vue'
import employeeCompanyEmpLimit from '@/views/web/orgnization/components/employeeCompanyEmpLimit.vue'
export default {
  components: { departmentCompanyChoose, employeeCompanyEmpLimit },
  data: function () {
    return {
      dpms: [],
      dpmEmpReq: {
        dpmId: null,
        codeLink: null,
        pageIndex: 1,
        pageSize: 20,
        keyword: null,
      },
      dpmEmpRes: {
        Items: [],
        Total: 0,
      },
      empCmps: [],
      curDpm: null,
      curEmp: null,
      cmpLimitVis: false,
      empLimitVis: false,
    }
  },
  watch: {
    curDpm() {
      if (this.curDpm) {
        this.getDepartmentEmps()
      }
    },
  },
  methods: {
    getDepartmentTree() {
      getDepartmentTree().then(({ data }) => {
        this.dpms = data
      })
    },
    getDepartmentEmps() {
      // this.dpmEmpReq.codeLink = this.curDpm.DPM_CodeLink
      this.dpmEmpReq.dpmId = this.curDpm.DPM_ID
      getDepartmentEmps(this.dpmEmpReq).then(({ data }) => {
        this.dpmEmpRes = data
      })
    },
    getEmployeeCompanyLimits() {
      getEmployeeCompanyLimits({ dpmId: this.curDpm.DPM_ID, empId: this.curEmp.DE_EmployeeID }).then(({ data }) => {
        this.empCmps = data
        this.cmpLimitVis = true
      })
    },
    saveEmployeeCompanyLimits(val) {
      saveEmployeeCompanyLimits({ dpmId: this.curDpm.DPM_ID, empId: this.curEmp.DE_EmployeeID, cmpIds: val }).then(() => {
        this.getDepartmentEmps()
        this.$message('保存成功')
        this.cmpLimitVis = false
      })
    },
  },
  mounted: function () {
    this.getDepartmentTree()
  },
}
</script>
<style scoped>
.session {
  background: white;
  margin-bottom: 10px;
  padding: 10px;
}
</style>